<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';


const mainOneRef = ref()
onMounted(()=>{
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(mainOneRef.value);
  // 绘制图表
  myChart.setOption({
    title: {
      text: '年度收入统计'
    },
    tooltip: {},
    xAxis: {
      data: ["12月", "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月"]
    },
    yAxis: {},
    legend: {
      data: ['物业费', '行车收入']
    },
    series: [
      {
        name: '物业费',
        stack: '总收入',
        type: 'bar',
        // showBackground: true,
        itemStyle: {
          normal: {
            color: 'rgba(54, 86, 255, 1)'
          }
        },
        barWidth: 20,  // 设置柱子宽度为 30 像素
        data: [3708.34, 3750, 3750, 3666.67, 3750, 3708.34, 3750, 3708.34, 3750, 3750, 3708.34, 3750]
      },
      {
        name: '行车收入',
        stack: '总收入',
        type: 'bar',
        // showBackground: true,
        itemStyle: {
          normal: {
            color: 'rgba(205, 228, 255, 1)'
          }
        },
        barWidth: 20,  // 设置柱子宽度为 30 像素
        data:
          [2900, 1640, 1640, 1800, 2040, 2660, 1200, 1200, 1640, 560, 800, 2440]
      }
    ]
  });
})
</script>

<template>
  <div class="workbench-page">
    <el-row :gutter="20">
      <el-col :span="17">
        <div class="card-container">
          <div class="card-title">园区数据</div>
          <div class="card-statistic">
            <el-statistic :value="56233.03">
              <template #title>年度累计收费（元）</template>
            </el-statistic>
            <el-statistic :value="6">
              <template #title>入驻企业总数（个）</template>
            </el-statistic>
            <el-statistic :value="5">
              <template #title>月卡车辆总数（辆）</template>
            </el-statistic>
            <el-statistic :value="48">
              <template #title>一体杆总数（台）</template>
            </el-statistic>
          </div>
        </div>
        <div class="card-container">
          <!-- 柱状图 -->
          <div ref="mainOneRef" class="card-title" style="width: 800px; height: 300px;"></div>
        </div>
        <!-- <div class="card-container">
          <div class="card-title">快捷入口</div>
        </div> -->
      </el-col>
      <el-col :span="7">
        <div class="card-container">
          <div class="card-title">快捷入口</div>
          <div class="card-entry">
            <div class="card-entry-item">
              <img src="@/assets/entry-enterprise.png" alt="" />
              <span>添加企业</span>
            </div>
            <div class="card-entry-item">
              <img src="@/assets/entry-employee.png" alt="" />
              <span>员工管理</span>
            </div>
            <div class="card-entry-item">
              <img src="@/assets/entry-bill.png" alt="" />
              <span>添加账单</span>
            </div>
            <div class="card-entry-item">
              <img src="@/assets/entry-screen.png" alt="" />
              <span>数据大屏</span>
            </div>
          </div>
        </div>
        <div class="card-container">
          <div class="card-title">快捷入口</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.workbench-page {
  background-color: #f4f6f8;
  height: 100%;
  .card-container {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
  }
  .card-title {
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
  }
  .card-statistic {
    display: flex;
    justify-content: space-between;
  }
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
  --el-statistic-title-font-size: 13px;
}
:deep(.el-statistic__head) {
  margin-bottom: 12px;
}

.card-entry {
  display: flex;
  justify-content: space-between;
  &-item {
    text-align: center;
    img {
      width: 40px;
    }
    span {
      font-size: 12px;
      display: block;
      margin-top: 8px;
    }
  }
}
</style>
